<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on 的基本使用</title>
</head>
<body>
<div id="app">
  <h1>{{ counter }}</h1>
  <!--  直接修改变量  -->
  <div>直接操作变量形式</div>
  <button v-on:click="counter--">-</button>
  <button v-on:click="counter++">+</button>
  <br>
  <!--    要求：计数器最小值大于等于 0-->
  <div>调用函数形式</div>
  <button v-on:click="decrease">-</button>
  <button v-on:click="increase">+</button>


  <div>使用 v-on 语法糖</div>
  <button @click="decrease">-</button>
  <button @click="increase">+</button>
</div>
<script type="module">
  import {createApp, ref} from "../../../../../js/vue.esm-browser.js";

  const app = createApp({
    setup(){
      let  counter = ref(0)
      // let  counter = 0

      function increase() {
        counter.value = counter.value + 1
      }

      function decrease() {
        if (counter.value > 0) {
          counter.value = counter.value - 1
        }
        else {
          console.log("计数值不能小于 0");
        }
      }

      return {
        counter,
        increase,
        decrease,
      }

    }
  })

  app.mount("#app")
</script>
</body>
</html>